<script>
import {Lock, User} from "@element-plus/icons-vue";
import request from "@/utils/request";

export default{
  name: "Login",
  //图标引用
  computed: {
      Lock() {
      return Lock
    },
    User() {
      return User
    }
  },
  data() {
    return {
      form: {}
    }
  },
  methods: {
    sign_up(){
      request.post("/sign_up", this.form).then(res =>
      {if(res.code === 200){
        this.$message({
          type: "success",
          message: "注册成功"
        })
        this.$router.push("/login")
      }else{
        this.$message({
          type: "error",
          message: res.message
        })
      }
      })
    },
    jump(){
      this.$router.push("/login")
    }
  }
}

</script>

<template>
  <div class="sign_up">
    <div style="width: 400px; margin: 150px auto">
      <div style="color: #cccccc; font-size: 30px; text-align: center; padding: 30px 0">欢迎注册本系统</div>
      <el-form :model="form" ref="form" size="normal" >
        <el-form-item>
          <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="form.username"/>
        </el-form-item>
        <el-form-item>
          <el-input :prefix-icon="Lock" placeholder="请输入密码" v-model="form.password" show-password/>
        </el-form-item>
        <el-form-item>
          <el-input :prefix-icon="Lock" placeholder="请再次确认密码"v-model="form.confirmPwd" show-password/>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="sign_up">
            注册
          </el-button>
        </el-form-item>
      </el-form>
      <div class="text-center">
        <el-text class="mx-1" style="margin-left: 138px; color: white" @click="jump">已有账户？请点击登录</el-text>
      </div>
    </div>
  </div>
</template>


<style scoped>
.sign_up {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../assets/static/1.png");
  position: fixed;
  background-size: 100% 100%;
}
</style>